html {
  font-size: 50px;
}
@media screen and (min-width: 0px) and (max-width: 320px) {
  html {
    font-size: 21.33333333px;
  }
}
@media screen and (min-width: 360px) {
  html {
    font-size: 24px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 25px;
  }
}
@media screen and (min-width: 384px) {
  html {
    font-size: 25.6px;
  }
}
@media screen and (min-width: 400px) {
  html {
    font-size: 26.66666667px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 27.6px;
  }
}
@media screen and (min-width: 424px) {
  html {
    font-size: 28.26666667px;
  }
}
@media screen and (min-width: 480px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 540px) {
  html {
    font-size: 36px;
  }
}
@media screen and (min-width: 720px) {
  html {
    font-size: 48px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 50px;
  }
}
/* 点击高亮需要清除，设置为transparent变成透明 */
* {
  -webkit-tap-highlight-color: transparent;
}
/* 在移动端浏览器默认的外观在IOS上加上这个属性才能给按钮和输入框自定义样式 */
input {
  -webkit-appearance: none;
}
/* 禁用长按页面时的弹出菜单 */
img,
a {
  -webkit-touch-callout: none;
}
/* 给body进行样式初始化（注意！制作过程中，在这一步，需要定义页面的最大和最小支持宽度max-width、min-width。） */
body {
  min-width: 320px;
  max-width: 15rem;
  margin: 0 auto;
  background-color: #f2f2f2;
  line-height: 1.5;
  font-family: Arial, Helvetica, STHeiTi, sans-serif;
}
a {
  text-decoration: none;
}
ul,
ol {
  list-style: none;
  padding: 0;
}
img {
  max-width: 100%;
  max-height: 100%;
}
.top-banner {
  position: relative;
  width: 15rem;
  height: 2rem;
}
.top-banner .top-banner-img {
  display: block;
  width: 100%;
  height: 100%;
}
.top-banner .top-banner-img img {
  width: 100%;
  height: 100%;
}
.top-banner .close {
  position: absolute;
  top: 0.5rem;
  left: 0.1rem;
  width: 1rem;
  height: 1rem;
  background: url(../images/close.png) no-repeat center center;
  background-size: 0.6rem;
}
.header {
  width: 15rem;
  height: 3.6rem;
  background-color: #FFDB47;
}
.header img {
  max-width: 100%;
}
.header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 13.64rem;
  height: 1.76rem;
  padding: 0 0.68rem;
}
.header .header-top a:nth-child(1) img {
  display: block;
  width: 0.72rem;
  height: 1.2rem;
}
.header .header-top a:nth-child(2) img {
  display: block;
  width: 9rem;
  height: 1.1rem;
  margin-right: 1rem;
}
.header .header-top a:nth-child(3) img {
  display: block;
  width: 0.72rem;
  height: 1.2rem;
}
.header .search {
  position: relative;
  width: 15rem;
  height: 1.84rem;
  padding: 0 0.48rem;
  box-sizing: border-box;
}
.header .search a {
  position: absolute;
  width: 14.04rem;
  height: 1.76rem;
}
.header .search i {
  position: absolute;
  top: 0.52rem;
  left: 0.84rem;
  width: 0.72rem;
  height: 0.72rem;
  background: url(../images/search_btn.png) no-repeat 0 0;
  background-size: 0.72rem;
}
.header .search form {
  display: flex;
  align-items: center;
  width: 14.04rem;
  height: 1.76rem;
}
.header .search form input {
  padding: 0.06rem 0.4rem 0 1.3rem;
  border: 0;
  box-sizing: border-box;
  border-radius: 0.88rem;
}
.banner {
  width: 15rem;
  height: 5.2rem;
  background: url(../images/banner_bg.png) no-repeat 0 0;
  background-size: 15rem;
}
.banner .wrapper {
  position: relative;
  width: 14.04rem;
  height: 5.2rem;
  margin: 0 auto;
  overflow: hidden;
}
.banner .wrapper ul {
  position: relative;
  width: 30rem;
  height: 5.2rem;
  margin: 0;
}
.banner .wrapper ul li {
  position: absolute;
  top: 0;
  left: 14.04rem;
  width: 14.04rem;
  height: 5.2rem;
  border-radius: 0.48rem;
  overflow: hidden;
}
.banner .wrapper ul li.current {
  left: 0;
}
.banner .wrapper ul li img {
  width: 14.04rem;
  height: 5.2rem;
}
.banner .wrapper ol {
  margin: 0;
  position: absolute;
  left: 50%;
  bottom: 0.24rem;
  height: 0.16em;
  text-align: center;
  transform: translate(-50%);
}
.banner .wrapper ol li {
  float: left;
  width: 0.18rem;
  height: 0.16rem;
  margin: 0 0.08rem;
  border-radius: 0.08rem;
  background-color: #666;
}
.banner .wrapper ol li.current {
  width: 0.36rem;
  background-color: #fff;
}
nav {
  display: flex;
  flex-wrap: wrap;
  width: 15rem;
  height: 6.16rem;
}
nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20%;
  height: 2.84rem;
  text-decoration: none;
  color: #666;
}
nav a:nth-child(n+6) {
  justify-content: start;
}
nav img {
  width: 1.68rem;
  height: 1.68rem;
}
nav p {
  margin: 0.1rem 0 0;
  font-size: 0.44rem;
  line-height: 0.44rem;
}
.discount {
  display: flex;
  width: 14.04rem;
  height: 5.16rem;
  margin: 0 auto;
  border-radius: 0.24rem 0.24rem 0 0;
  overflow: hidden;
  font-size: 0.16rem;
  background-color: #fff;
}
.discount .left {
  position: relative;
  width: 7rem;
  height: 5.16rem;
  border-right: 1px solid #f2f2f2;
}
.discount .left .title-wrapper {
  display: flex;
  align-items: flex-end;
}
.discount .left p {
  width: 6rem;
  height: 0.6rem;
  margin: 0.08rem 0 0 0.48rem;
  color: #999;
  font-size: 0.48rem;
}
.discount .right {
  float: left;
  width: 7rem;
  height: 5.16rem;
}
.discount .right .title-wrapper {
  display: flex;
  align-items: flex-end;
}
.discount .right p {
  width: 6rem;
  height: 0.6rem;
  margin: 0.08rem 0 0 0.48rem;
  color: #999;
  font-size: 0.48rem;
}
.discount .left .title-wrapper .title,
.discount .right .title-wrapper .title {
  height: 0.8rem;
  margin: 0.36rem 0.16rem 0 0.48rem;
  font-size: 0.56rem;
  font-weight: bold;
  line-height: 0.8rem;
  color: #333;
}
.discount .left .title-wrapper .count span,
.discount .right .title-wrapper .count span {
  width: 0.226667rem;
  height: 0.186667rem;
  border-radius: 2px;
  background-color: #FFCC00;
  font-size: 0.16rem;
  font-weight: bold;
  line-height: 0.7rem;
  color: black;
}
.discount .left .items,
.discount .right .items {
  display: flex;
  width: 7rem;
  margin-top: 0.1rem;
  padding-left: 0.56rem;
}
.discount .left .items li,
.discount .right .items li {
  width: 2.4rem;
}
.discount .left .items li.item-left,
.discount .right .items li.item-left {
  margin-right: 1.1rem;
}
.discount .left .items li a,
.discount .right .items li a {
  display: block;
}
.discount .left .items li a img,
.discount .right .items li a img {
  max-width: 100%;
}
.discount .left .items li a p,
.discount .right .items li a p {
  position: relative;
  bottom: 0.066667rem;
  width: 60px;
  height: 0.56rem;
  margin: 0;
  padding: 0;
  font-size: 0.44rem;
  line-height: 0.56rem;
  text-align: center;
  color: red;
}
.discount .right .items li a p {
  color: black;
}
.bd .cut-line {
  width: 15rem;
  height: 1.2rem;
}
.bd .cut-line a {
  display: block;
  height: 1.2rem;
}
.bd .bd-list {
  width: 15rem;
}
.bd .bd-list .bd-three {
  display: flex;
  justify-content: space-between;
  width: 14.04rem;
  margin: 0 auto 0.26rem;
}
.bd .bd-list .bd-two {
  display: flex;
  width: 14.04rem;
  margin: 0 auto;
  border-bottom: 1px solid #f2f2f2;
}
.bd .bd-list .bd-three .item {
  position: relative;
  width: 4.52rem;
  height: 5.32rem;
  border-radius: 0.24rem;
  background-color: #fff;
}
.bd .bd-list .bd-three .item a {
  display: block;
}
.bd .bd-list .bd-three .item a img:nth-child(1) {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0.3rem auto 0;
}
.bd .bd-list .bd-three .item a img:nth-child(2) {
  position: absolute;
  bottom: 0;
  width: 4.52rem;
  height: 1.86rem;
}
.bd .bd-list .bd-three .item a p {
  margin: 0;
  position: relative;
  font-size: 0.44rem;
  color: white;
  text-align: center;
  width: 100%;
}
.bd .bd-list .bd-three .item a p:nth-child(3) {
  position: absolute;
  top: 3.16rem;
}
.bd .bd-list .bd-three .item a p:nth-child(3) span {
  display: block;
  height: 0.68rem;
  font-size: 0.44rem;
  width: 2rem;
  margin: 0 auto;
  border-radius: 0.34rem;
  text-align: center;
  color: #d9a87a;
  background-color: #fff;
}
.bd .bd-list .bd-three .item a p:nth-child(4) {
  margin: 0.62rem auto 0.06rem;
}
.bd-two .left .title-wrapper .count span,
.bd-two .right .title-wrapper .count span {
  height: 0.56rem;
  background-color: #F9F5EE;
  color: #AB813A;
}
